<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>修改用户</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-2.1.0.min.js"></script>
    <!--<script src="js/bootstrap.min.js"></script>-->

</head>
<body>
<div class="container" style="width: 400px;">
    <h3 style="text-align: center;">修改用户</h3>
    <div class="form-group">
        <label for="loginname">登录名：</label>
        <input type="text" class="form-control" id="loginname" name="username" readonly="readonly"/>
    </div>

    <div class="form-group">
        <label for="username">姓名：</label>
        <input type="text" class="form-control" id="username" name="name" placeholder="请输入姓名"/>
    </div>

    <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"/>
    </div>

    <div class="form-group">
        <label for="password2">确认密码：</label>
        <input type="password" class="form-control" id="password2" name="password2" placeholder="请输入密码"/>
    </div>

    <div class="form-group">
        <label>性别：</label>
        <input id="men" type="radio" name="sex" value="男" checked="checked"/>男
        &nbsp;&nbsp;&nbsp;
        <input id="women" type="radio" name="sex" value="女"/>女
    </div>

    <div class="form-group">
        <label for="age">年龄：</label>
        <input type="number" class="form-control" id="age" name="age" placeholder="请输入年龄"/>
    </div>

    <div class="form-group">
        <label for="address">籍贯：</label>
        <select name="address" id="address" class="form-control">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="成都">成都</option>
            <option value="杭州">杭州</option>
            <option value="重庆">重庆</option>
            <option value="西安">西安</option>
            <option value="武汉">武汉</option>
            <option value="沧州">沧州</option>
        </select>
    </div>

    <div class="form-group">
        <label for="qq">QQ：</label>
        <input type="text" id="qq" class="form-control" name="qq" placeholder="请输入QQ号码"/>
    </div>

    <div class="form-group">
        <label for="email">Email：</label>
        <input type="text" id="email" class="form-control" name="email" placeholder="请输入邮箱地址"/>
    </div>

    <div class="form-group">
        <label for="email">管理员：</label>
        <input id="admin_yes" type="radio" disabled="disabled" name="isadmin" value="是"/>是
        &nbsp;&nbsp;&nbsp;
        <input id="admin_no" type="radio" disabled="disabled" name="isadmin" value="否" checked="checked"/>否
    </div>

    <div class="form-group" style="text-align: center">
        <input id="btn_sub" class="btn btn-primary" type="button" value="提交" onclick="mysub()"/>
        <input id="btn_reset" class="btn btn-box" type="button" value="重置" onclick="location.href=location.href"/>
        <input id="btn_back" class="btn btn-default" type="button" value="返回" onclick="location.href='list.html'"/>
    </div>

</div>
<script>
    var uid = 0;
    // 查询 url 中的某个参数的值
    function getParamValue(key){
        var url = location.search;
        if(url!=""){
            url = url.substr(1);
            var kvs = url.split("&");
            for(var i=0;i<kvs.length;i++){
                var kv = kvs[i].split("=");
                if(key==kv[0]) return kv[1];
            }
        }
        return "";
    }
    // 展示当前用户信息
    function loadUserInfo(){
        uid = getParamValue("uid");
        if(uid>0){ // 当前参数是有效的
            jQuery.ajax({
                url:"getuserbyuid",
                type:"POST",
                data:{"uid":uid},
                success:function(result){
                    if(result!=null && result.data!=null &&
                    result.data.uid>0){
                        // 得到了有效的数据，对页面中的控件进行赋值
                        var userinfo = result.data;
                        jQuery("#loginname").val(userinfo.loginname);
                        jQuery("#username").val(userinfo.username);
                        var sex = userinfo.sex;
                        if(sex=="女"){
                            jQuery("#women").attr("checked","checked");
                        }
                        jQuery("#age").val(userinfo.age);
                        jQuery("#address").val(userinfo.address);
                        jQuery("#qq").val(userinfo.qq);
                        jQuery("#email").val(userinfo.email);
                        var isadmin = userinfo.isadmin;
                        if(isadmin){
                           jQuery("#admin_yes").attr("checked","checked"); 
                        }
                    }else{
                        alert("抱歉：后端接口不可用，请稍后再试！");
                    }
                }
            });
        }else{
            alert("非法参数！");
        }
    }
    loadUserInfo();
    // 提交用户修改
    function mysub(){
        var username = jQuery("#username"); 
        var password = jQuery("#password");
        var password2 = jQuery("#password2");
        var sex = jQuery("input[name=sex]:checked").val();
        var age = jQuery("#age").val();
        var address = jQuery("#address").val();
        var qq = jQuery("#qq").val();
        var email = jQuery("#email").val();
        var isadmin = jQuery("input[name=isadmin]:checked").val();
        // 1.非空效验
        if(jQuery.trim(username.val())==""){
            alert("请先输入姓名！");
            username.focus();
            return false;
        }
        // 2.确认两次输入的密码是一致
        if(password.val()!="" || password2.val()!=""){
            if(password.val()!=password2.val()){
                alert("两次输入密码不一致，请先检查！");
                password.focus();
                return false;
            }
        }   
        // 3.将当前的数据提交给后端
        jQuery.ajax({
            url:"update",
            type:"POST",
            data:{
                "uid":uid,
                "username":username.val(),
                "password":password.val(),
                "sex":sex,
                "age":age,
                "address":address,
                "qq":qq,
                "email":email
            },success:function(result){
                if(result!=null && result.data>0){
                    // 成功
                    alert("恭喜：修改成功！");
                    location.href = "list.html";
                }else{
                    alert("抱歉：操作失败，请稍后再试！");
                }
            }
        });
    }

</script>
</body>
</html>